<template>
	<view class="card bg-white">
		<view class="flex align-center card-bd" @tap="setAddr">
			<view class="flex-sub flex align-center">
				<image src="/static/addr.png" mode="widthFix" class="addr"></image>
				<view class="flex-sub ml20 mr20">
					<view class="flex align-center">
						<text class="name">{{ info.contact_name }}</text>
						<text class="phone">{{ info.contact_phone }}</text>
						<view class="tag" v-if="info.is_default == 1">默认</view>
					</view>

					<view class="margin-top-sm flex align-center">
						<text class="detail">{{ info.province }} {{ info.city }} {{ info.district }} {{ info.address }}</text>
					</view>
				</view>
				<image src="/static/right.png" mode="widthFix" class="right"></image>
			</view>
		</view>
		<view class="card-ft flex align-center justify-between">
			<mycheckbox @handChange="handConfrim" :state="info.is_default == 1" text="设为默认"></mycheckbox>
			<view class="flex">
				<view class="edit flex align-center" @tap="editAddr">
					<image src="/static/edit.png" mode="widthFix"></image>
					<text>编辑</text>
				</view>
				<view class="del flex align-center" @tap="handConfrim(info.id, 'delete')">
					<image src="/static/delete.png" mode="widthFix"></image>
					<text>删除</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import mycheckbox from './mycheckbox';
export default {
	data() {
		return {};
	},
	props: {
		info: {
			type: Object,
			default: {}
		},
		settype: {
			type: [String, Number]
		}
	},
	components: { mycheckbox },
	methods: {
		changeDefault() {
			this.$postAction(this.$api.setdefaultAddr + this.info.id, null, {
				custom: {
					ShowLoading: false
				}
			}).then(da => {
				uni.showToast({
					title: da.msg
				});
				setTimeout(() => {
					/* 刷新列表 */
					this.$emit('upload');
				}, 200);
			});
			// console.log(e.detail.value)
		},
		editAddr() {
			uni.navigateTo({
				url: '/pages/address/add?id=' + this.info.id
			});
		},
		setAddr() {
			if (this.settype == 1) {
				this.$u.prePage().addressData = this.info;
				this.$u.prePage().transportway = '';
				this.$u.prePage().calcOrder();
				this.$Router.back();
			} else {
				this.editAddr();
			}
		},
		handConfrim(id, type) {
			var that = this;
			uni.showModal({
				title: '提示',
				content: '你确定要' + (type == 'delete' ? '删除' : '设为默认值') + '吗？',
				success: function(res) {
					if (res.confirm) {
						type == 'delete' ? that.delAddr(id) : that.changeDefault(id);
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		delAddr(id) {
			this.$postAction(this.$api.delAddr + id, null, {
				custom: {
					ShowLoading: false
				}
			}).then(da => {
				if (da.code == 0) {
					uni.showToast({
						title: '删除地址成功',
						icon: 'success'
					});
					setTimeout(() => {
						/* 刷新列表 */
						this.$emit('upload');
					}, 200);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.card {
	background: #ffffff;
	border-radius: 12upx;
	margin: 0 25upx 30upx;
	color: #292a2e;

	.card-bd {
		padding: 32upx;
	}
	.addr {
		width: 28upx;
		height: 40upx;
	}
	.right {
		width: 28upx;
		height: 28upx;
	}
	.name {
		font-size: 32upx;
		margin-right: 12upx;
		font-weight: 500;
		color: #000;
	}
	.phone {
		font-size: 28upx;
		color: #000;
	}
	.tag {
		width: 60upx;
		height: 30upx;
		background: linear-gradient(90deg, #ff8173 0%, #ff3543 100%);
		border-radius: 4upx;
		text-align: center;
		font-size: 18upx;
		font-weight: 500;
		color: #ffffff;
		margin-left: 16upx;
		font-size: 20upx;
	}
	.detail {
		font-size: 26upx;
		color: #48484a;
		vertical-align: middle;
		margin-top: 13upx;
		line-height: 37upx;
	}
	.arrow {
		width: 17upx;
	}

	.card-ft {
		border-top: 1px solid #e5e5e5;
		padding: 24upx 10upx;
		margin: 0 22upx;
		::v-deep .checkbox {
			::v-deep .uni-checkbox {
				border-radius: 6upx;
				border: 1px solid #ccd1d4;
			}
		}

		.round {
			transform: scale(0.7);
		}
		.txt {
			font-size: 24upx;
			font-weight: 500;
			color: #74767d;
		}
		image,
		text {
			display: inline-block;
			vertical-align: middle;
		}

		.edit,
		.del {
			color: #48484a;
			font-size: 26upx;
		}
		.edit image {
			width: 32upx;
			height: 32upx;
			margin-right: 8upx;
		}
		.del {
			margin-left: 26upx;
			image {
				width: 28upx;
				height: 25upx;
				margin-right: 10upx;
			}
		}
	}
}
</style>
